<template>
    <div class="notice-box">
        <!-- 出库 -->
        <div class="box-header">
            <div class="search-box">
                <el-input v-model="querySearch" style="width: 240px" placeholder="请输入搜索内容" :prefix-icon="Search" />
                <el-button class="search">搜索</el-button>
            </div>
        </div>
        <div class="function-box">
            <el-button class="createBtn" @click="addOutboundOrder"><i class="iconfont icon-plus-square" />新增</el-button>
            <el-button class="exportBtn" @click="deleteData"><i class="iconfont icon-shanchu" />删除</el-button>
        </div>
        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="totals" :page="pageNum" :limit="pageSize"
            @handleSelectionChange="handleSelectionChange" @handleChange="handleChange"
            :tableHeaderData="inventoryTableHeaderData" :tableData="noticeList" @tableDetail="tableDetail">
        </forTableCom>
        <!-- <noticeCom/> -->
    </div>
</template>
<script setup>
import forTableCom from '@/components/forTableCom/index.vue'
import {  deleteSelectOutboundApi } from '@/api/inventory';
import { ref, onMounted } from 'vue';
import { sliceDate } from '@/utils/date.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import noticeCom from './components/noticeCom'


let updatePop = updatePopHook()

// 弹窗
let flag = ref(false)
let disabled = ref(false)
// 弹窗标题
let popTitle = ref('新增公告')
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')

// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])
// 修改详情回显数据弹窗
let PopData = ref([])
// 详情控制变量
let defindFlag = ref(true)
// 勾选背景id
const idActive = 'noticeTitle'


// 表格表头数据
let inventoryTableHeaderData = ref([
    {
        prop: 'noticeType',
        label: '通知类型',
    },
    {
        prop: 'noticeTitle',
        label: '标题',
    },
    {
        prop: 'noticeContent',
        label: '内容',
    },
    {
        prop: 'noticeDate',
        label: '发布时间',
    },
])
// 表格数据内容
let noticeList = ref([
{
    noticeType: '活动',
    noticeTitle: '标题',
    noticeContent: '内容内容内容内容内容内容内容内容内容',
    noticeDate: '2024-07-15'
},
{
    noticeType: '消息',
    noticeTitle: '标题',
    noticeContent: '内容内容内容内容内容内容内容内容内容',
    noticeDate: '2024-07-5'
},
{
    noticeType: '通知',
    noticeTitle: '标题',
    noticeContent: '内容内容内容内容内容内容内容内容内容',
    noticeDate: '2024-07-5'
},
{
    noticeType: '预警',
    noticeTitle: '标题',
    noticeContent: '内容内容内容内容内容内容内容内容内容',
    noticeDate: '2024-07-5'
}])
// 删除勾选的列API
const deleteSelectOutbound = async (data) => {
    // let res = await deleteSelectOutboundApi(data)
    // let { code } = res
    // if (code === 200) {
    //     queryOutboundList()
    //     ElMessage({
    //         type: 'success',
    //         message: '删除成功',
    //     })
    // } else {
    //     ElMessage({
    //         type: 'error',
    //         message: '删除错误',
    //     })
    // }
}
// 删除勾选的列二次提示
const deleteData = () => {
    ElMessageBox.confirm(
        '你确定要删除勾选的数据吗?',
        '警告',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 调用删除入库单的接口
            if (multipleSelection.value.length > 1) {
                ElMessage({
                    type: 'warning',
                    message: '只能一条一条删除，禁止多个删除数据(@&@)',
                })
            } else {
                let deleteRow = {}
                multipleSelection.value.forEach(v => {
                    deleteRow = {
                        'outboundId': v.outboundId,
                        'outboundType': v.outboundType,
                        'productId': v.productId,
                        'custId': v.custId,
                    }
                })
                // 删除数据
                deleteSelectOutbound(deleteRow)
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })
}
// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
}


// 打开新增弹窗
const addOutboundOrder = () => {
    flag.value = true
    disabled.value = false
    popTitle.value = '新增活动信息'
}

// 详情双击行
const tableDetail = (props) => {
    disabled.value = true
    flag.value = true
    popTitle.value = '活动详情信息'
    defindFlag.value = false
    PopData.value = props
}
// 关闭弹窗
const popUpsFlase = (v) => {
    flag.value = v
    defindFlag.value = true
}
// 查询活动数据
const queryOutboundList = async (data = '') => {
    // let res = await querySelectOutboundApi(data)
    // let { code, rows, total } = res
    // if (code == 200) {
    //     // 改变日期显示长度问题
    //     noticeList.value = sliceDate(rows, 'outboundDate')
    //     totals.value = total
    // }
}
// 查找
const onSearch = (v) => {
    // 每次查询后回到页1
    pageNum.value = 1
    queryOutboundList(v)
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    pageNum.value = page
    pageSize.value = limit
    let obj = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    let params = Object.assign(obj, inventoryForm.value[0])
    queryOutboundList(params)
}
// 请求活动接口函数
const getoutboundOrderData = () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    queryOutboundList(params)
}

onMounted(() => {
    getoutboundOrderData()
})
</script>
<style scoped lang='scss'>
@mixin flex {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.notice-box {
    padding: 16px;
    .box-header {
        @include flex;

        .search-box {
            @include flex;
            width: 20%;

            .search {
                margin-left: 20px;
            }
        }
    }
    .box-content{
        height: 80vh;
        max-height: 80vh;
        padding: 16px;
    
    }
}
</style>
